<template>
	<div class="myTidings">
		<ul class="list">
            <Loadmore
				:bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                ref="loadmore"
                :autoFill="false"
            >
            <div class='mc' v-if="list.length<1">
                <div>
                        <p>暂无动态!</p>
                </div>
            </div>
            <li v-for="(item,index) in list" :key='index' v-if="list.length>0">
                <!-- 和我的直播间版本一个 -->
                <router-link :to="{name: 'homeDetail',query: {id: item.id,user: 'self'}}">
                    <img :src="item.course_pic" width="112" height="77" />
                    <div>
                        <h3>{{item.course_name}}</h3>
                        <div>
                        主讲老师: {{item.username}}
                        </div>
                        <div>
                        开课时间: {{item.starttime}}
                        </div>
                        <p>
                                <span class="discount" v-if='item.iffree == "charge"' style="background: #fbc707;color: #523628"><b>￥</b>{{item.charge}}</span>
                                <span class="discount" v-if='item.iffree == "free"' style="background: #52422b;color: #fdd619;letter-spacing: 3px;">免费</span>
                                <!-- {{item.iffree=='free'?"免费":(item.discount?item.discount:item.charge)}} -->
                        </p>
                    </div>
                </router-link>
              </li>
            </Loadmore>
		</ul>
	</div>
</template>
<script>
    import {Loadmore} from 'mint-ui';
	export default {
		data() {
			return {
				list: [],
                userid: '',
                sentPage: {
					page: 1
                },
                allLoaded: false,
				totalNum: 0, 	//总数据条数

			}
		},
		components: {
            Loadmore
		},
		methods: {
            //根据用户id获取我的动态课程列表
            getCourseListByUid(params) {  // type: 1是单节课 2是多节课
                this.userid = localStorage.getItem("loginMobile");
                this.$api.post(this.$api.baseURLSchool,"selecttype_view/view_course_user/0?uid="+this.userid,params,r => {
                    this.totalNum = r.data.records;
                    if(this.sentPage.page==1) {
                        this.list = r.data.rows;
                    }else {
                        this.list = this.list.concat(r.data.rows);
                    }
                    if(r.data.rows.length == 0&&this.sentPage.page>1) {
                        this.$utils._toast("暂无更多数据");
                    }
                    if(this.totalNum == this.list.length) {
                        this.allLoaded = true;
                    }
                },err => {
                    console.log(err);
                })
            },
            //下拉刷新
			loadTop() {
				this.sentPage.page =1;
			  	setTimeout(() => {
		        	this.getCourseListByUid(this.sentPage);
		        }, 20);
			  	this.$refs.loadmore.onTopLoaded();
			},
            //上拉加载
			loadBottom() {
				(this.sentPage.page)++;
		        setTimeout(() => {
		        	this.getCourseListByUid(this.sentPage);
		        }, 20);
		        if(this.totalNum == this.list.length) {
					this.allLoaded = true;
		        }
				this.$refs.loadmore.onBottomLoaded();
			},
		},
		created() {
            this.getCourseListByUid(this.sentPage);
		}
	}
</script>
<style lang="scss" scoped>
    .mc {
		padding: 40px 0;
		img {
			display: block;
			margin: 0 auto;
            width: 110px !important;
            height: 143px;
		}
		p {
			padding-top: 10px;
			text-align: center;
		}
	}
</style>
